<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>下载背景图和文字</title>
</head>

<body>
  <div id="content">
    <!-- 18 -->
    <div id="background">
      <div class="table table2">
        <div>
          名称
        </div>
        <div>
          产品
        </div>
        <div>
          价格
        </div>
        <div>
          涨跌
        </div>
      </div>

    </div>
  </div>
  <button id="downloadBtn">下载背景图和文字</button>
  <button id="inputBtn">更改input的颜色</button>
</body>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
  document
    .getElementById("downloadBtn")
    .addEventListener("click", function () {
      html2canvas(document.getElementById("content"), {
        useCORS: true, // 允许跨域图片
        backgroundColor: null, // 保持透明背景
      }).then(function (canvas) {
        // 创建一个<a>元素
        var link = document.createElement("a");
        link.href = canvas.toDataURL("image/png");
        link.download = "background_with_text.png";
        // 触发点击事件
        link.click();
      });
    });
  document
    .getElementById("inputBtn")
    .addEventListener("click", function () {
      const inputs = document.querySelectorAll("input");
      inputs.forEach((input) => {
        console.log('[ input.value.charAt(0) ] >', input.value.charAt(0))
        if (input.value === "持平") {
          input.classList.add("white");
          input.classList.remove("red");
          input.classList.remove("green");
          // 获取字符串的第一个值
        } else if (input.value.charAt(0) == '涨') {
          input.classList.add("red");
          input.classList.remove("white");
          input.classList.remove("green");
        } else if (input.value.charAt(0) == '跌') {
          input.classList.add("green");
          input.classList.remove("white");
          input.classList.remove("red");
        } else {
          input.classList.add("black");
          input.classList.remove("white");
          input.classList.remove("red");
          input.classList.remove("green");
        }

      });
    });

  const jin = [
    {
      id: 1,
      name: '水贝黄金',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '周大福',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '六福珠宝',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '周生生',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '金至尊',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '潮宏基',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '谢瑞麟',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '老凤祥',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '老庙黄金',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '菜百首饰',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '周六福',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '周大生',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '中国黄金',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '金大福',
      type: "黄金价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '工商银行',
      type: "金条价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '建设银行',
      type: "金条价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '农业银行',
      type: "金条价格",
      value: '100元/克',
      value2: '持平'
    },
    {
      id: 1,
      name: '中国银行',
      type: "金条价格",
      value: '100元/克',
      value2: '持平'
    },
  ]
  function addEvent() {
    jin.forEach(item => {
      document.getElementById("background").innerHTML += `
      <div class="table">
        <div class="div2">${item.name}</div>
        <div class="div3">${item.type}</div>
        <div>
          <input type="text" value="100元/克">
        </div>
        <div>
          <input type="text" value="持平">
        </div>
      </div>
    `
    })

  }
  addEvent()
</script>
<style>
  body,
  html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #content {
    width: 720px;
    height: 960px;
    text-align: center;
    color: white;
    /* background: rgba(0, 0, 0, 0.5); */
    z-index: 1;
  }

  /*  466 333 */
  #background {
    width: 100%;
    height: 100%;
    /* background-image: url("1.webp"); */
    background-image: url("bj.jpg");
    background-size: contain;
    /* 保持图片原始大小 */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
  }

  .table {
    color: black;
    width: 94%;
    height: 30px;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 18px;
  }

  .table2 {
    padding-top: 46%;

  }

  input {
    width: 100%;
    height: 30px;
    border: 0px;
    background: transparent;
    text-align: center;
    font-size: 18px;
  }

  .red {
    color: red;
  }

  .black {
    color: black;
  }

  .green {
    color: green;
  }

  .white {
    color: rgb(167 150 150);
  }

  .table div {
    width: 25%;
  }
</style>

</html>